<template>
	<div class="login">
		<form>
			<div class="login-name">登录</div>
			<div class="usename">
				<img src="../../../static/login/usename.png" width="25px" height="25px" />
				<mt-field class='usn' label=" " icon="more" placeholder="请输入账号" v-model="username"></mt-field>
			</div>
			<div class="psword">
				<img src="../../../static/login/psw.png" width="25px" height="25px" />
				<mt-field class='psw' label=" " current-password placeholder="请输入密码" type="password" v-model="password"></mt-field>
			</div>
			<div class="btn">
				<!-- <router-link class='routernone' to="home"> -->
				<span @click="login">登录</span>
				<!-- </router-link> -->
			</div>

			<div class="options">
				<div class="box">
					<span class="ckb" @click="ckb">
						<img v-show='ishow' src="../../../static/login/gou.png" alt="" width="13px" height="14px" />
					</span>
					<span>记住密码</span>
				</div>
				<router-link class='routernone forget' to='/forgetpassword'>
					<span>忘记密码?</span>
				</router-link>

			</div>
		</form>

	</div>
</template>

<script>
import api from "./../../api/api.js";
import { Toast } from "mint-ui";
export default {
  name: "login",
  data() {
    return {
      ishow: false,
      username: "",
      password: "",
      datevalue: "",
      userdata: ""
    };
  },
  created() {
    this.datevalue = this.formatDate(new Date().getTime());
  },
  methods: {
    login() {
      if (!this.username || !this.password) {
        Toast("账号或者密码不能为空!");
        return;
      }
      this.$http({
        method: "post",
        url: api.loginURL + "login",
        params: {
          inParam: {
            time: this.datevalue,
            sysCode: "FH_PUBOPE",
            userZch: this.username,
            password: this.password,
            userType: "5"
          }
        }
      }).then(res => {
        console.log(res.data);
        if (res.data.state == "F") {
          Toast(res.data.msg);
        } else {
          Toast("登录成功");
          this.userdata = res.data.data;
          let str = JSON.stringify(this.userdata);
          localStorage.setItem("swipeableId", 0);
          if (this.ishow) {
            localStorage.setItem("userid", this.userdata.userId);
            localStorage.setItem("accid", this.userdata.accId);
            localStorage.setItem("logindata", str);
          } else {
            console.log("隐藏");
          }
          this.$router.push("/home");
        }
      });
    },
    ckb() {
      this.ishow = !this.ishow;
    }
  }
};
</script>

<style>
.mint-field .mint-cell-title {
  width: 50px;
}
input:-webkit-autofill {
  background-color: transparent !important;
}
input {
  background: transparent !important;
}
</style>

<style scoped>
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  background: url(../../../static/login/bg.png);
  background-size: cover;
}

.login .login-name {
  font: 18px/18px "microsoft yahei";
  text-align: center;
  margin: 40px 0 66px 0;
  color: #252525;
}

.login .mint-cell {
  border-radius: 25px;
  width: 82vw;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #e60012;
}

.login .usn {
  margin-bottom: 24px;
}

.login .options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 8vh;
  padding: 0 9vw;
  color: #829c8b;
  font-size: 15px;
}

.login .btn {
  margin: 0 8vw;
  margin-top: 26px;
  text-decoration: none;
}

.login .btn span {
  display: block;
  text-align: center;
  background-color: #e60012;
  color: #ffffff;
  font: 16px/50px "microsoft yahei";
  height: 50px;
  border-radius: 25px;
}

.login .options .box {
  display: flex;
  align-items: center;
  background-color: transparent;
}

.login .options .box .ckb {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #8baf9f;
  margin-right: 10px;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}

.login .options .box .ckb img {
  /*width: 20px;
		height: 20px;*/
  text-align: center;
}

.forget span {
  color: #829c8b;
  font-size: 15px;
}

/*登录图标*/
.usename {
  position: relative;
  /*background: chartreuse;*/
}
.usename img {
  position: absolute;
  left: 15%;
  top: 25%;
}
.psword {
  position: relative;
  /*background: chartreuse;*/
}
.psword img {
  position: absolute;
  left: 15%;
  top: 25%;
}
</style>